---
title: 器械不良事件
---
<template>
  <my-wrapper :header="null">
    <div>
      <el-button plain type="primary" @click="rowNew">新增</el-button>
      <el-button plain type="success">导出</el-button>
<!--      <el-button plain type="success">审核</el-button>-->
<!--      <el-button plain type="danger">审核不通过</el-button>-->
<!--      <el-button plain type="warning">取消审核</el-button>-->
<!--      <el-button plain type="primary">转发</el-button>-->
<!--      <el-button plain type="success">处理</el-button>-->
      <!--表格内容-->
      <el-table
        ref="list"
        :data="tableData"
        style="width: 100%;margin-top: 1vw"
        border
        stripe
        highlight-current-row
        :default-sort="{prop: 'date', order: 'descending'}"
        @row-click="handleRowClick"
        @select-all="handleCheckedAllAndCheckedNone"
        @select="handleCheckedAllAndCheckedNone">
        <el-table-column property="place" label="器械实际使用场所" width="150" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column property="adverseDate" label="报告日期" width="150" sortable :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 5px">{{scope.row.adverseDate}}</span>
          </template>
        </el-table-column>
        <el-table-column property="reporterName" label="报告人姓名" width="120"></el-table-column>
        <el-table-column property="patientName" label="患者姓名" width="120"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column property="clinicalDiagnosis" label="临床诊断" width="120"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column property="status" label="提交状态" width="120" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.status=='1'" style="margin-left: 5px;color: #007df8">已保存</span>
            <span v-if="scope.row.status=='2'" style="margin-left: 5px;color: #13ce66">已审核</span>
            <span v-if="scope.row.status=='-99'" style="margin-left: 5px;color: red">审核不通过</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button plain circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
                       @click="rowEdit(scope.$index, scope.row)"></el-button>
            <el-button plain circle icon="el-icon-check" type="success" title="审核通过" size="small"
                       @click="rowDel(scope.$index, scope.row, $event);"></el-button>
            <el-button plain circle icon="el-icon-close" type="danger" title="审核不通过" size="small"
                       @click="rowDel1(scope.$index, scope.row, $event);"></el-button>
            <el-button plain circle icon="el-icon-delete" type="danger" title="删除" size="small"
                       @click="rowDel12(scope.$index, scope.row, $event);"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        :total="tableData.length"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <!--编辑-弹出层-->
      <my-dialog
        ref="dialog"
        title="新增"
        :visible.sync="isShowEditDialog"
        draggable
        target="body"
        width="1100px"
        height="700px"
        @submit="handleSubmit"
        @close="dialogClose">
        <!--      <my-form :model="model"-->
        <!--               footer-align="right"-->
        <!--               label-position="top"-->
        <!--               :on-submit="handleSubmit">-->
        <!--        <my-input name="title" label="标题"></my-input>-->
        <!--        <my-range name="range" label="日期范围" mode="date" :props="{valueFormat:'yyyy-MM-dd'}"></my-range>-->
        <!--      </my-form>-->
        <el-form
          ref="editForm"
          :model="formFileds"
          label-width="55px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="报告日期" label-width="100px">
                <el-date-picker v-model="formFileds.adverseDate" value-format="yyyy-MM-dd" :editable="false"
                                :clearable="false"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="事件发生时间" label-width="100px">
                <el-date-picker v-model="formFileds.adverseDate" value-format="yyyy-MM-dd" :editable="false"
                                :clearable="false"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="病案号" prop="name" label-width="100px">
                <el-input v-model="formFileds.patientId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="formFileds.patientName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="name">
                <el-input v-model="formFileds.sex"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="年龄" prop="name" label-width="100px">
                <el-input v-model="formFileds.age"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="科室" prop="name">
                <el-input v-model="formFileds.departName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="床号" prop="name">
                <el-input v-model="formFileds.bedNo"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="临床诊断" prop="address" label-width="100px">
              <el-input v-model="formFileds.clinicalDiagnosis"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="既往病史" prop="address" label-width="100px">
              <el-input v-model="formFileds.medicalHistory"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="产品名称" prop="address" label-width="100px">
              <el-input type="textarea" v-model="formFileds.productName"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="注册证编号/曾用" prop="address" label-width="100px">
              <el-input type="textarea" v-model="formFileds.productCertificate"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="型号" prop="address" label-width="100px">
              <el-input type="textarea" v-model="formFileds.productModel"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="规格" prop="address" label-width="100px">
              <el-input type="textarea" v-model="formFileds.productSpecification"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="产品批号" prop="address" label-width="100px">
              <el-input type="textarea" v-model="formFileds.productBatch"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="产品编号" prop="address" label-width="100px">
              <el-input type="textarea" v-model="formFileds.productNo"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="UDI" prop="address" label-width="100px">
              <el-input type="textarea" v-model="formFileds.productUdi"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="生产日期" prop="address" label-width="100px">
              <el-date-picker v-model="formFileds.productCreateDate" value-format="yyyy-MM-dd" :editable="false"
                              :clearable="false"></el-date-picker>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="有效期至" prop="address" label-width="100px">
              <el-date-picker v-model="formFileds.productValidity" value-format="yyyy-MM-dd" :editable="false"
                              :clearable="false"></el-date-picker>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="生产企业名称" prop="address" label-width="100px">
              <el-input type="textarea" v-model="formFileds.productFactory"></el-input>
            </el-form-item>
          </el-row>

          <!-- 不良事件情况 -->
          <el-row>
            <el-form-item label="事件发生日期" prop="address" label-width="100px">
              <el-date-picker v-model="formFileds.eventDate" value-format="yyyy-MM-dd" :editable="false"
                              :clearable="false"></el-date-picker>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="发现或获知日期" prop="address" label-width="100px">
              <el-date-picker v-model="formFileds.findDate" value-format="yyyy-MM-dd" :editable="false"
                              :clearable="false"></el-date-picker>
            </el-form-item>
          </el-row>
<!--          <el-row>-->
<!--            <el-form-item label="事件发生场所" prop="address" label-width="100px">-->
<!--              <el-checkbox-group v-model="checkList" :max="1">-->
<!--                <el-checkbox label="1">死亡</el-checkbox>-->
<!--                <el-checkbox label="2">严重伤害</el-checkbox>-->
<!--                <el-checkbox label="3">其他</el-checkbox>-->
<!--              </el-checkbox-group>-->
<!--            </el-form-item>-->
<!--          </el-row>-->
          <el-row>
            <el-form-item label="伤害表现" prop="address" label-width="100px">
              <el-input type="textarea" v-model="formFileds.damagePerformance"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="器械故障表现" prop="address" label-width="100px">
              <el-input type="textarea" v-model="formFileds.equipmentFailure"></el-input>
            </el-form-item>
          </el-row>

          <!-- 使用情况 -->
          <el-row>
            <el-form-item label="预期治疗疾病或作用" prop="address" label-width="100px">
              <el-input type="textarea" v-model="formFileds.effect"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="器械使用日期" prop="address" label-width="100px">
              <el-date-picker v-model="formFileds.col13" value-format="yyyy-MM-dd" :editable="false"
                              :clearable="false"></el-date-picker>
              <!--            <el-input type="textarea" v-model="formFileds.col13"></el-input>-->
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="事件发生场所" prop="address" label-width="100px">
              <el-checkbox-group v-model="checkList1" :max="1">
                <el-checkbox label="1">医疗机构</el-checkbox>
                <el-checkbox label="2">家庭</el-checkbox>
                <el-checkbox label="3">其他</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="场所名称" prop="address" label-width="100px">
              <el-input type="textarea" v-model="formFileds.placeName"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="使用过程" prop="address" label-width="100px">
              <el-input type="textarea" v-model="formFileds.useProcedure"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="合并用药/械情况说明" prop="address" label-width="100px">
              <el-input type="textarea" v-model="formFileds.situation"></el-input>
            </el-form-item>
          </el-row>

          <!-- 事件初步原因分析与处置 -->
          <el-row>
            <el-form-item label="事件原因分析" prop="address" label-width="100px">
              <el-checkbox-group v-model="checkList2" :max="1">
                <el-checkbox label="1">产品原因（包括说明书等）</el-checkbox>
                <el-checkbox label="2">操作原因</el-checkbox>
                <el-checkbox label="3">患者自身原因</el-checkbox>
                <el-checkbox label="4">无法确定</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="事件原因分析描述" prop="address" label-width="100px">
              <el-input type="textarea" v-model="formFileds.reason"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="初步处置情况" prop="address" label-width="100px">
              <el-input type="textarea" v-model="formFileds.information"></el-input>
            </el-form-item>
          </el-row>
        </el-form>
      </my-dialog>
    </div>
  </my-wrapper>
</template>

<script>
  import {addApparatusEvent, apparatusEventQueryPage,editApparatus,deleteApparatusEvent} from '@/api/account.js';

  export default {
    name: "Table",
    data() {
      return {
        model: {
          title: '回填标题',
          range: ['2019-11-01', '2019-11-15']
        },
        checkList: [],
        checkList1: [],
        checkList2: [],
        checkList3: [],
        formFileds: {
          date: '',
          name: '',
          address: '',
          id: '',
          eventId:undefined,
          adverseDate: undefined,//上报不良事件日期date
          departName: '内科',//科室
          departId: '101',//科室编码
          reporterName: '主任医生',//报告人
          reporterId: '001',//报告人编码

          //患者基本情况
          patientName: '张三',//患者姓名
          birthday: undefined,//出生日期date
          ageType: undefined,//年龄类型
          age: 30,//年龄
          sex: '男',//性别
          patientId: '1001',//病历号
          patientNo: '1001',//病历号
          medicalHistory: '无',//既往病史
          bedNo: 102,//床号
          clinicalDiagnosis: '扁桃体发炎',//临床诊断

          //医疗器械情况
          productName: undefined,//产品名称
          productCertificate: undefined,//注册证编号/曾用
          productModel: undefined,//型号
          productSpecification: undefined,//规格
          productBatch: undefined,//产品批号
          productNo: undefined,//产品编号
          productUdi: undefined,//UDI
          productCreateDate: undefined,//生产日期date
          productValidity: undefined,//有效期至date
          productFactory: undefined,//生产企业名称

          //不良事件情况
          eventDate: undefined,//事件发生日期date
          findDate: undefined,//发现或获知日期date
          damageType: undefined,//伤害程度
          damagePerformance: undefined,//伤害表现
          equipmentFailure: undefined,//器械故障表现

          //使用情况
          effect: undefined,//预期治疗疾病或作用
          place: undefined,//使用场所
          placeName: undefined,//场所名称
          useProcedure: undefined,//使用过程
          situation: undefined,//合并用药/械情况说明

          //事件初步原因分析与处置
          reasonType: undefined,//事件原因分析
          reason: undefined,//事件原因分析描述
          information: undefined,//初步处置情况
          status: '1'
        },
        rules: {
          // name: [
          //   {required: true, message: '姓名不能为空', trigger: 'blur, change'}
          // ],
          // address: [
          //   {required: true, message: '地址不能为空', trigger: 'blur, change'}
          // ]
        },
        tableData: [],
        isShowEditDialog: false
      }
    },
    created() {
      this.getData();
    },
    methods: {
      getData(){
        apparatusEventQueryPage({"condition": {}, size: 10, current: 1}).then(response => {
          console.info(response)
          if (response.code === 0) {
            //localStorage.setItem("token",response.data.token);
            this.tableData = response.data.records;
          }
        });
      },
      handleRowClick(row, event, column) {
        // 仅选中当前行
        this.setCurRowChecked(row);
      },
      handleCheckedAllAndCheckedNone(selection) {
        // 当前选中仅一行时操作-（当前表格行高亮）
        1 != selection.length && this.$refs.list.setCurrentRow();
      },
      dialogClose() {
        // 清空编辑表单
        this.$refs.editForm.resetFields();
      },
      //清空表单信息
      resetForm() {
        this.checkList =[];
        this.checkList1 = [];
        this.checkList2 = [];
        this.formFileds = {
          date: '',
          name: '',
          address: '',
          id: '',

          eventId:undefined,
          adverseDate: undefined,//上报不良事件日期date
          departName: '内科',//科室
          departId: '101',//科室编码
          reporterName: '主任医生',//报告人
          reporterId: '001',//报告人编码

          //患者基本情况
          patientName: '张三',//患者姓名
          birthday: undefined,//出生日期date
          ageType: undefined,//年龄类型
          age: 30,//年龄
          sex: '男',//性别
          patientId: '1001',//病历号
          patientNo: '1001',//病历号
          medicalHistory: '无',//既往病史
          bedNo: 102,//床号
          clinicalDiagnosis: '扁桃体发炎',//临床诊断

          //医疗器械情况
          productName: undefined,//产品名称
          productCertificate: undefined,//注册证编号/曾用
          productModel: undefined,//型号
          productSpecification: undefined,//规格
          productBatch: undefined,//产品批号
          productNo: undefined,//产品编号
          productUdi: undefined,//UDI
          productCreateDate: undefined,//生产日期date
          productValidity: undefined,//有效期至date
          productFactory: undefined,//生产企业名称

          //不良事件情况
          eventDate: undefined,//事件发生日期date
          findDate: undefined,//发现或获知日期date
          damageType: undefined,//伤害程度
          damagePerformance: undefined,//伤害表现
          equipmentFailure: undefined,//器械故障表现

          //使用情况
          effect: undefined,//预期治疗疾病或作用
          place: undefined,//使用场所
          placeName: undefined,//场所名称
          useProcedure: undefined,//使用过程
          situation: undefined,//合并用药/械情况说明

          //事件初步原因分析与处置
          reasonType: undefined,//事件原因分析
          reason: undefined,//事件原因分析描述
          information: undefined,//初步处置情况
          status: '1'
        }
      },
      formatDate(now, type) {
        let date = new Date(now)
        let y = date.getFullYear() // 年份
        let m = date.getMonth() + 1 // 月份，注意：js里的月要加1
        if (m < 10) {
          m = "0" + m;
        }
        let d = date.getDate() // 日
        if (d < 10) {
          d = "0" + d;
        }
        if (type == "1") {
          // 返回值，根据自己需求调整，现在已经拿到了年月日时分秒了
          return y + '-' + m + '-' + d
        } else if (type == "2") {
          return m + '.' + d
        }
      },
      rowNew() {
        this.resetForm();
        this.formFileds.adverseDate = this.formatDate(new Date().getTime(),"1");
        this.formFileds.eventDate = this.formFileds.adverseDate;
        this.isShowEditDialog = true;
      },
      rowEdit(index, row) {
        this.resetForm();
        if(row.damageType != null){
          this.checkList.push(row.damageType);
        }
        if(row.place != null){
          this.checkList1.push(row.place);
        }
        if(row.reasonType != null){
          this.checkList2.push(row.reasonType);
        }
        this.setCurRowChecked(row);
        // 给编辑弹出层赋值
        // ***这里需要注意的是：因为加了排序 所以tableData的顺序和实际显示的行顺序不一样
        for (let key in this.formFileds) {
          this.formFileds[key] = row[key];
        }
        this.isShowEditDialog = true;
      },
      handleSubmit() {
        this.formFileds.damageType = this.checkList[0]
        this.formFileds.place = this.checkList1[0]
        this.formFileds.reasonType = this.checkList2[0]
        debugger
        if (this.formFileds.eventId != null && this.formFileds.eventId != "") {
          //this.handleEdit(this.formFileds.id);
          // this.formFileds.status = '2';
          editApparatus(this.formFileds).then(response => {
            console.info(response)
            if(response.code===0){
              this.$message.success(response.msg);
              this.getData();
              this.isShowEditDialog = false;
            }else{
              this.$message.error(response.msg);
            }
          });
        } else {
          this.formFileds.status = '1';
          addApparatusEvent(this.formFileds).then(response => {
            console.info(response)
            if(response.code===0){
              //localStorage.setItem("token",response.data.token);
              this.$message.success(response.msg);
              this.tableData.push(this.formFileds);
              //this.resetForm();
              this.isShowEditDialog = false;
            }else{
              this.$message.error(response.msg);
            }
          });
        }
      },
      handleEdit(id) {
        let that = this;
        this.$refs.editForm.validate(isValid => {
          if (!isValid) return;
          // 保存编辑后的数据
          this.tableData.forEach(function (val, index) {
            if (val.id == id) {
              Object.assign(that.tableData[index], that.formFileds);
            }
          })
          this.isShowEditDialog = false;
          // 考虑到可能编辑了日期-需要重新排序
          // ***注意：手动排序传参和表格的default-sort属性格式不太一样
          this.$refs.list.sort('date', 'descending');
          this.$message.success('编辑成功');
        });
      },
      rowDel(index, row, event) {
        let that = this;
        // 让当前删除按钮失焦
        event.target.blur();
        this.$confirm('确定要审核当前行吗？', '审核', {
          comfirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          //this.tableData.splice(row.id, 1);
          row.status = '2'
          editApparatus(row).then(response => {
            console.info(response)
            if(response.code===0){
              this.$message.success('审核成功');
              this.getData();
            }else{
              this.$message.error(response.msg);
            }
          });
          return false;
        });
      },
      rowDel1(index, row, event) {
        let that = this;
        // 让当前删除按钮失焦
        event.target.blur();
        this.$confirm('确定要审核当前行吗？', '审核不通过', {
          comfirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          //this.tableData.splice(row.id, 1);
          row.status = '-99'
          editApparatus(row).then(response => {
            console.info(response)
            if(response.code===0){
              this.$message.success('审核成功');
              this.getData();
            }else{
              this.$message.error(response.msg);
            }
          });
          return false;
        });
      },
      rowDel12(index, row, event) {
        let that = this;
        // 让当前删除按钮失焦
        event.target.blur();
        this.$confirm('确定要删除当前行吗？', '删除', {
          comfirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          deleteApparatusEvent({"eventId":row.eventId}).then(response => {
            console.info(response)
            if(response.code===0){
              this.$message.success(response.msg);
              this.getData();
            }else{
              this.$message.error(response.msg);
            }
          });
          return false;
        });
      },
      // 选中当前行-当前行的复选框被勾选
      setCurRowChecked(row) {
        this.$refs.list.clearSelection();
        this.$refs.list.toggleRowSelection(row);
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-form {
    padding: 0 10px;
  }

  .el-date-editor {
    width: 100% !important;
  }

  /deep/ {
    .my-wrapper__body {
      padding-bottom: 0 !important;
    }
  }

  ::v-deep .el-table {
    font-size: 11px;
  }
</style>
